<template>
  <nm-container>
    <el-form label-width="100px" :inline="true" style="background:white;">
      <el-form-item label="所属车站：" prop="station_id">
        <el-select v-model="list.model.stationid" placeholder="请选择">
          <el-option v-for="item in station_idList" :key="item.value" :label="item.label" :value="item.value" clearable> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班次号：" prop="bus_id">
        <el-select v-model="list.model.bus_id" placeholder="请选择" clearable>
          <el-option v-for="item in classesList" :key="item.id" :label="item.busNum" :value="item.busNum"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="线路ID：" prop="route_id">
        <el-select v-model="list.model.lineId" placeholder="请选择" clearable>
          <el-option v-for="item in lineList" :key="item.lineId" :label="item.lineName" :value="item.lineId" clearable> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否实名制：">
        <el-select v-model="list.model.isRealName" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="是" value="true"></el-option>
          <el-option label="否" value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开停状态：">
        <el-select v-model="list.model.status" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="开" value="true"></el-option>
          <el-option label="停" value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运营方式：">
        <el-select v-model="list.model.work_way" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="直达" value="1"></el-option>
          <el-option label="普通" value="2"></el-option>
          <el-option label="公交" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区域类型：">
        <el-select v-model="list.model.district_type" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="县内班线" value="0"></el-option>
          <el-option label="县际班线" value="1"></el-option>
          <el-option label="市际班线" value="2"></el-option>
          <el-option label="省际班线" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车次类型：">
        <el-select v-model="list.model.bus_type" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="固定" value="1"></el-option>
          <el-option label="流水" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发车时间：" prop="start_time">
        <el-input v-model="list.model.start_time" clearable />
      </el-form-item>
      <el-form-item label="运行周期：">
        <el-input v-model="list.model.run_cycle"></el-input>
      </el-form-item>
      <el-form-item label="开始序号：">
        <el-input v-model="list.model.run_start_serial"></el-input>
      </el-form-item>
      <el-form-item label="是否报道后售票：" label-width="200">
        <el-select v-model="list.model.is_saleafterreport" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="是" value="true"></el-option>
          <el-option label="否" value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始日期：">
        <el-date-picker v-model="list.model.start_date" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期：">
        <el-date-picker v-model="list.model.end_date" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="候车厅：">
        <el-input v-model="list.model.waitting_room"></el-input>
      </el-form-item>
      <el-form-item label="检票口：" prop="check_gate">
        <el-input v-model="list.model.bus_id" clearable />
      </el-form-item>
      <el-form-item label="开始日期：">
        <el-date-picker v-model="list.model.start_date" type="date" placeholder="选择日期"> </el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期：">
        <el-date-picker v-model="list.model.end_date" type="date" placeholder="选择日期"> </el-date-picker>
      </el-form-item>

      <el-form-item label="互联网张数：">
        <el-input v-model="list.model.interlink_quantity"></el-input>
      </el-form-item> -->

      <nm-button type="primary" icon="search" @click="ListData" text="查询" style="margin-left:20px"></nm-button>
      <nm-button type="info" @click="refreshData">
        <nm-icon name="refresh"></nm-icon>
        重置
      </nm-button>
      <nm-button v-bind="buttons.add" @click="getPop">添加</nm-button>
    </el-form>

    <el-row id="editMsgBody">
      <el-col :span="6">
        <span>检票口</span>
        <el-input class="editMsg" v-model="formInline.checkGate"></el-input>
        <el-button type="primary" @click="changecheckportFun">修改</el-button>
      </el-col>
      <el-col :span="6">
        <span>时间</span>
        <el-input class="editMsg" v-model="formInline.startTime"></el-input>
        <el-button type="primary">修改</el-button>
      </el-col>
      <el-col :span="6">
        <span>车号</span>
        <!-- <el-input class="editMsg" v-model="formInline.busNum"></el-input> -->
        <el-select class="editMsg" v-model="formInline.vehicleId" filterable placeholder="请选择">
          <el-option v-for="item in vehicleOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-button type="primary" @click="changevehicleFun">换车</el-button>
      </el-col>
      <el-col :span="6">
        <!-- <el-button type="primary">售票详情</el-button> -->
        <nm-button v-bind="buttons.add" @click="copyClasses">复制班次</nm-button>
      </el-col>
    </el-row>

    <el-table highlight-current-row :max-height="height" @current-change="handleCurrentChange" ref="topictable" :data="getList" border align="center" :header-cell-style="{ 'text-align': 'center', 'font-weight': 'bold', color: '#030202' }" :cell-style="{ 'text-align': 'center' }" style="width: 100%;text-align: center;">
      <el-table-column label="#" type="index" width="50"> </el-table-column>
      <el-table-column prop="buDate" label="日期" width="120">
        <template slot-scope="scope">
          <span>{{ getDateFun(scope.row.busDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="busNum" label="班次号" width="80"> </el-table-column>
      <el-table-column prop="startTime" label="时间" width="80"> </el-table-column>
      <el-table-column prop="stationName" label="所属车站" width="130"> </el-table-column>
      <el-table-column prop="lineName" label="线路" width="150"> </el-table-column>
      <el-table-column prop="status" label="车次状态" width="110">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" @change="busStatus(scope.row)" active-text="开" inactive-text="关"> </el-switch>
          <span>{{ scope.row.status == true ? '开' : '停' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="workType" label="营运类别" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.workType == 1 ? '单营' : '共营' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="workWay" label="营运方式" width="90">
        <template slot-scope="scope">
          <span>{{ scope.row.workWay == 1 ? '直达' : scope.row.workWay == 2 ? '普通' : '公交' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="transprotCompanyName" label="车属公司" width="150"> </el-table-column>
      <el-table-column prop="districtType" label="区域类别" width="90">
        <template slot-scope="scope">
          <span>{{ scope.row.districtType == 0 ? '县内班线' : scope.row.districtType == 1 ? '县际班线' : scope.row.districtType == 2 ? '市际班线' : '省际班线' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="busType" label="车次类型">
        <template slot-scope="scope">
          <span>{{ scope.row.busType == 1 ? '固定班' : '流水班' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="checkGate" label="检票口"> </el-table-column>
      <el-table-column prop="parkingSpace" label="发车位"> </el-table-column>
      <el-table-column prop="waittingRoom" label="候车厅"> </el-table-column>
      <el-table-column prop="isRealName" label="是否实名制" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.isRealName == true ? '实名' : '未实名' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalSeat" label="座位数"> </el-table-column>
      <el-table-column prop="soldSeat" label="已售票数"> </el-table-column>
      <el-table-column prop="interlinkQuantity" label="互售张数"> </el-table-column>
      <el-table-column prop="internetQuantity" label="互联网张数" width="100"> </el-table-column>

      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <nm-button v-bind="buttons.edit" @click="editModel(scope.row)" />
          <nm-button-delete v-bind="buttons.del" :id="scope.row.id" :action="removeAction" @success="refresh"></nm-button-delete>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="paginationChange" background layout="prev, pager, next" :total="total" />
    <save-page :id="curr.id" :visible.sync="dialog.save" @success="refresh" />
    <env-bus-info v-if="dialog" @success="refresh" :show="dialog" @hide="isHide" :isAdd="isAdd" :busData="busData" :formInline="formInline" :copy="copy" />
  </nm-container>
</template>
<script>
import { mixins } from 'netmodular-ui'
import page from './page'
import cols from './cols'
import SavePage from '../components/save'
import envBusInfo from '../components/envBusInfo'
const api = $api.dispatch.env_bus_Info

export default {
  name: page.name,
  mixins: [mixins.list],
  components: { SavePage, envBusInfo },
  data() {
    return {
      station_idList: [],
      busData: {},
      getList: [],
      total: 1,
      lineList: [],
      formInline: {},
      list: {
        title: page.title,
        cols,
        action: api.querybusinfo,
        model: {
          /** 车次号 */
          bus_id: '',
          station_id: '',
          lineId: '',
          isRealName: '',
          status: '',
          work_type: '',
          work_way: '',
          district_type: '',
          bus_type: '',
          start_time: '',
          run_cycle: '',
          run_start_serial: '',
          is_saleafterreport: '',
          start_date: this.getDateFun(),
          end_date: this.getDateFun(),
        },
      },
      removeAction: api.remove,
      buttons: page.buttons,
      dialog: false,
      isAdd: true,
      height: 400,
      selectBusNum: '',
      vehicleOption: [],
      newVehicleId: '',
      copy: false,
      classesList: [],
      pageIndex: 1,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - this.$refs.topictable.$el.offsetTop - 150
    })
    this.stationList()
    this.getLineData()
    this.vehicleList()
    this.getClasses()
  },
  methods: {
    paginationChange(val) {
      this.pageIndex = val
      this.ListData()
    },
    handleCurrentChange(data) {
      try {
        this.selectBusNum = data.busNum
        this.formInline = data
      } catch (e) {}
    },
    //获取班次列表
    getClasses() {
      api.querybusinfoforselect().then((res) => {
        res.unshift({ busNum: '全部', id: '' })
        this.classesList = res
      })
    },
    //复制班次
    copyClasses() {
      if (this.formInline.busDate == undefined) {
        this.$message({
          message: '请选择一个班次',
          type: 'warning',
        })
      } else {
        this.copy = true
        this.dialog = true
        this.isAdd = false
      }
    },
    vehicleList() {
      api.vehicleQuery().then((res) => {
        var arr = res.rows.map((item) => {
          return { value: item.id, label: item.license_no }
        })
        this.vehicleOption = arr
      })
    },
    // 修改检票口
    changecheckportFun() {
      var data = {
        port: this.formInline.checkGate,
        runBusId: this.formInline.id,
      }
      api.changecheckport(data).then((res) => {
        this.$message({
          message: '修改成功！',
          type: 'success',
        })
      })
    },
    // 修改班次号
    changevehicleFun() {
      var data = {
        vehicleId: this.formInline.vehicleId,
        runBusId: this.formInline.id,
      }
      this.$confirm(`确认修改（发车日期${this.getDateFun(this.formInline.busDate)}，班次号: ${this.selectBusNum}）车牌号吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          api.changevehicle(data).then((res) => {
            this.$message({
              message: '修改成功！',
              type: 'success',
            })
          })
        })
        .catch(() => {})
    },
    busStatus(v) {
      var data = {
        status: v.status,
        runBusId: v.id,
      }
      api.stoporrunbusinfo(data).then((res) => {
        this.$message({
          message: `操作成功，已${v.status ? '复班' : '停班'}！`,
          type: 'success',
        })
      })
    },
    getDateFun(num) {
      var d = new Date(num ? num : new Date())
      var y = d.getFullYear()
      var m = d.getMonth() + 1 < 10 ? `0${d.getMonth() + 1}` : d.getMonth() + 1
      var day = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate()
      return `${y}-${m}-${day}`
    },
    stationName(v) {
      var name
      this.station_idList.forEach((item) => {
        if (item.value == v) {
          name = item.label
        }
      })
      return name
    },
    refreshData() {
      this.list.model = {}
    },
    refresh() {
      this.ListData()
    },
    ListData() {
      this.list.model['Page.Index'] = this.pageIndex
      this.list.model['Page.Size'] = 10
      this.list.model.bus_id = this.list.model.bus_id == '全部' ? '' : this.list.model.bus_id
      api.queryrunbusinfolist(this.list.model).then((res) => {
        this.getList = res.rows
        this.total = res.total
      })
    },
    getLineData() {
      api.querylineinfo().then((res) => {
        res.unshift({ lineId: '全部', lineName: null })
        this.lineList = res
      })
    },
    stationList() {
      api.organizationQuery().then((res) => {
        res.rows.unshift({ name: '全部', code: '' })
        var list = res.rows.map((item) => {
          return { label: item.name, value: item.code }
        })
        this.station_idList = list
      })
    },
    getPop() {
      this.isAdd = false
      this.dialog = true
      this.copy = false
    },
    isHide(n) {
      this.dialog = false
      if (n) this.ListData()
    },
    editModel(e) {
      this.busData = e
      this.isAdd = true
      this.dialog = true
    },
  },
}
</script>

<style scoped>
.editMsg {
  display: inline-block;
  width: 40%;
  margin-right: 20px;
  margin-left: 15px;
}
#editMsgBody {
  background: white;
  padding-bottom: 20px;
}
</style>
